<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>初始化阶段</title>
    <style>
        #root {
            margin: 25px auto;
            border: 1px solid blue;
            width: 80vw;
        }

        .container {
            margin: 15px;
            border: 1px solid green;
        }

        .counter {
            margin: 15px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>

    <h3>初始化阶段</h3>

    <div id="root"></div>

    <!-- 导入 vue.js 3.x 核心库 -->
    <script src="../scripts/vue@3.2.31.js"></script>

    <script>
        const MozicodeCounter = {
            inject: [ 'initialValue' ],
            template: `<div class="counter">
                           你已经点击{{ counter }}次
                           <hr />
                           <button @click="handler">点我增加</button>
                        </div>`,
            data(){
                return { counter: this.initialValue }
            },
            methods: {
                handler(){
                    this.counter++;
                }
            }
        }

        const MozicodeContainer = {
            props: [ 'name' ],
            inject: [ 'version' ],
            template: `<div class="container">
                            <mozicode-counter></mozicode-counter>
                            <hr>
                            <button @click="show">显示</button>
                            <slot></slot>
                       </div>`,
            data(){
                return { message: '我是容器' }
            },
            methods: {
                show(){
                    alert( this.message );
                }
            },
            computed: {
                rand(){
                    return ( Math.random() * 100 ) | 0 ;
                }
            },
            watch: {
                message(newValue, oldValue){
                    console.log( newValue , oldValue );
                }
            },
            provide: {
                initialValue: 100
            },
            components: {
                'mozicode-counter': MozicodeCounter
            },
            // 生命周期钩子
            beforeCreate(){
                console.log( '- - - before create - - -' );
                console.log( '\t组件选项已初始化完毕: ' , this.$options );
                console.log( '\t已经解析并处理props: ' , this.$props );
                console.log( '\t已经解析并处理插槽: ' , this.$slots );
                console.log( '\t已经解析并处理attrs: ' , this.$attrs );
                console.log( '\t尚未初始化 inject : ' , this.version );
                console.log( '\t尚未处理 methods : ' , this.show  );
                console.log( '\t尚未处理 data : ' , this.message );
                console.log( '\t尚未处理 computed : ' , this.rand );
            },
            // 生命周期钩子
            created(){
                console.log( '- - - created - - -' );
                console.log( '\tinject 已经初始化完毕: ' , this.version );
                console.log( '\tmethods 已经初始化完毕: ' , this.show );
                console.log( '\tdata 已经初始化完毕: ' , this.message );
                console.log( '\tcomputed 已经处理完毕: ' , this.rand );
            }
        }

        const options = {
            provide: {
                version: '1.0'
            },
            template: `<mozicode-container name="first" class="wrapper" id="first">
                          通过插槽分发内容
                       </mozicode-container>`,
            components: {
                'mozicode-container': MozicodeContainer
            }
        }

        Vue.createApp( options ).mount( '#root' );
    </script>
    
</body>
</html>